<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>task8</title>
	<style type="text/css">
			.container{
		        width: 100%;  
		        max-width: 1200px; 
		           
		    }
			[class*='col-'] {
		        float: left; 
		        min-height: 1px; 
		        /*-- our gutter -- */
		        padding: 10px;
		        background-color: white;
		        text-align: center; 
		        box-sizing: border-box;/*这个很关键*/
		    }
		    @media screen and (min-width: 768px){
		    .col-1{ width: 8.33%; }
		    .col-2{ width: 16.66%; }
		    .col-3{ width: 25%;    }
		    .col-4{ width: 33.33%; }
		    .col-5{ width: 41.66%; }
		    .col-6{ width: 50%;   }
		    .col-8{width: 66.66%}
		    .col-12{width: 100%}
		     }/*大于768px时*/
		     @media screen and (max-width: 768px){
		     	.col-4{width: 50%}
		     	.c412{width: 100%}
		     	.col-3{width: 25%}
		     	.col-6{width: 50%}
		     	.c12{width: 16.66%}
		     	.c28{width: 66.6%}
		     	.c23{width: 25%}
		     }

		    .row{
		    	width: 100%;
		    	height: 72px;
		    }
		    .cell{
		    	outline: 1px solid #999;
		    	height: 50px;
		    	background-color: #eee;
		    }

	</style>
</head>
<body>
	<div class="container">
	    <div class="row">
	        <div class="col-4"><div class="cell">col-4</div></div> 
	        <div class="col-4"><div class="cell">col-4</div></div> 
	        <div class="col-4 c412"><div class="cell">col-4</div></div> 
	    </div> 
	    <div class="row">
	        <div class="col-3"><div class="cell">col-3</div></div> 
	        <div class="col-6"><div class="cell">col-6</div></div> 
	        <div class="col-3"><div class="cell">col-3</div></div> 
	    </div> 
	    <div class="row">
	        <div class="col-1 c12"><div class="cell">col-1</div></div> 
	        <div class="col-1 c12"><div class="cell">col-1</div></div> 
	        <div class="col-2 c28"><div class="cell">col-2</div></div> 
	        <div class="col-2 c23"><div class="cell">col-2</div></div> 
	        <div class="col-6 c23"><div class="cell">col-6</div></div> 
	    </div> 
	</div>
</body>
</html>